<template>
  <div class="search-components">
    <div class="search-component">
      <div class="row keyword">
        <p class="label">关键词</p>
        <el-input
          v-model="searchModel.keyword"
          style="width: 220px"
          placeholder="车牌号"
          @keyup.enter="handleSearch"
        />
      </div>
      <div class="row keyword">
        <p class="label">车场名称</p>
        <el-select
          v-model="searchModel.lotId"
          style="width: 220px"
          placeholder="车场名称"
        >
          <el-option
            v-for="item in lotIdList.data"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="row keyword">
        <p class="label">车辆驶入时间</p>
        <el-date-picker
          style="width: 260px"
          v-model="searchModel.rangeDate"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
          @change="query"
        />
      </div>
      <div class="row keyword">
        <p class="label">卡类型</p>
        <el-button
          class="all"
          v-for="item in cardTypeList.data"
          :key="item.id"
          :link="cardType == item.id ? false : true"
          :type="cardType == item.id ? 'primary' : ''"
          @click="handleSelect2(item)"
        >
          {{ item.name }}
        </el-button>
      </div>
      <div class="row">
        <p class="label">停车时长</p>
        <el-button
          class="all"
          v-for="item in durationList.data"
          :key="item.id"
          :link="parking == item.id ? false : true"
          :type="parking == item.id ? 'primary' : ''"
          @click="handleSelect(item)"
        >
          {{ item.name }}
        </el-button>
      </div>
      <div class="search-btn">
        <el-button class="reset-btn" type="primary" @click="handleReset">
          <img class="icon-img" :src="iconReset" alt="" />
          重置</el-button
        >
        <el-button class="submit-btn" type="primary" @click="handleSearch">
          <img class="icon-img" :src="iconSearch" alt="" />
          查询</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import iconSearch from "@/assets/image/btn/icon-search.png";
import iconReset from "@/assets/image/btn/icon-reset.png";

const emits = defineEmits(["search"]);

const props = defineProps({
  listData: {
    type: Object,
    default: () => {},
  },
});

const searchModel = ref({
  lotId: "",
  rangeDate: [],
  cardType: 0,
  duration: 0,
});

const handleReset = () => {
  searchModel.value = {
    cardType: 0,
    duration: 0,
  };
  parking.value = 0;
  cardType.value = 0;
  // searchModel.value.lotId = lotIdList.data[0].id;
  emits("search", searchModel.value);
};

const handleSearch = () => {
  console.log(`output-> searchModel.value`, searchModel.value);
  emits("search", searchModel.value);
};

const lotIdList = reactive({
  data: [],
});

const cardType = ref(0);
const cardTypeList = reactive({
  data: [
    { id: 0, name: "全部" },
    { id: 1, name: "临卡" },
    { id: 2, name: "月卡" },
  ],
});

const parking = ref(0);
const durationList = reactive({
  data: [
    { id: 0, name: "全部" },
    { id: 1, name: "30分钟以內" },
    { id: 2, name: "0.5-3小时" },
    { id: 3, name: "3-6小时" },
    { id: 4, name: "6-12小时" },
    { id: 5, name: "12小时以上" },
  ],
});

const query = (argument) => {
  console.log("argument ===>", argument);

  if (argument === null) {
    searchModel.value.inTimeStart = "";
    searchModel.value.inTimeEnd = "";
    searchModel.value.rangeDate = [];
  } else {
    if (searchModel.value.rangeDate) {
      searchModel.value.inTimeStart = searchModel.value.rangeDate[0];
      searchModel.value.inTimeEnd = searchModel.value.rangeDate[1];
      emits("search", searchModel.value);
    }
  }
};

const handleSelect2 = (item) => {
  cardType.value = item.id;
  searchModel.value.cardType = cardType.value;
};

const handleSelect = (item) => {
  parking.value = item.id;
  searchModel.value.duration = parking.value;
};

onMounted(() => {
  setTimeout(() => {
    if (
      props.listData.lotIdList.length > 0 &&
      props.listData.lotIdList[0].name !== "全部"
    ) {
      // 如果不是，将“全部”选项添加到props.lotIdList的开头
      lotIdList.data = [...lotIdList.data, ...props.listData.lotIdList];
      // searchModel.value.lotId = lotIdList.data[0].id;
    } else {
      lotIdList.data = props.listData.lotIdList;
    }
  }, 1000);
});
</script>

<style lang="less" scoped>
.search-components {
  // display: flex;
  // justify-content: space-between;
  .search-component {
    display: flex;
    flex-wrap: wrap;
    .row {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }
    .label {
      font-size: 14px;
      color: #333333;
      margin-right: 8px;
      font-weight: 400;
    }
    .keyword {
      margin-right: 32px;
    }
  }
  .search-btn {
    margin-left: 50px;
    display: flex;
    .reset-btn {
      background: #f2f3f5;
      border: 1px solid #f2f3f5;
      border-radius: 2px;
      color: #333333;
      padding: 5px 16px;
    }
    .submit-btn {
      background: #007aff;
      border: 1px solid #007aff;
      border-radius: 2px;
      padding: 5px 16px;
    }
    .icon-img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
  }
}
.all {
  height: 28px;
  padding: 4px 16px;
}
</style>